<template>
  <div class="ly-nav" v-if="!logo" style="margin-left: 12px;">
      <img src="./back.png" style="width:20px; height:20px; margin-left: 12px;"  @click="goRoute(-1)"/>
  </div>
  <div class="ly-nav" v-else>
    <router-link to="/">
      <img src="./logo.png" />
    </router-link>
    <img src="./menu.png" class="menu" @click="menu()"/>

    <div class="nav-tab" @click="menunone()">
      <div class="nav-body">
        <a class="tab" to="/" @click.stop="menunoneRouter('/')">首页</a>
        <a class="tab" to="videoclass" @click.stop="menunoneRouter('videoclass')">模拟课堂</a>
        <a class="tab" to="feedback" @click.stop="menunoneRouter('feedback')">家长评价</a>
        <a class="tab" to="aboutwe" @click.stop="menunoneRouter('aboutwe')">外教团队</a>
        <a class="tab" to="privacy" @click.stop="menunoneRouter('privacy')" v-if="false">隐私政策</a>
        <a class="tab" to="" @click.stop="menunoneRouter()" v-if="false">其他</a>
      </div>
    </div>
  </div>
</template>
<script>
  import jq from 'jquery'

export default {
    name: 'ly-nav',
    props: ['logo'],
    data () {
      return {
        show: true
      }
    },
    mounted: function () {
//      var w = document.body.clientWidth || jq(document.body).width()
//      jq('.ly-nav').css('width', w + 'px')
      var h = (document.body.clientHeight > document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) + 100

      jq('.nav-tab').css('height', h + 'px')
      jq('#app').css('position', 'relative')
    },
    methods: {
      menu: function () {
        jq('.nav-tab').css('display', 'block')
        // jq('.nav-tab').css('position', 'absolute')
        jq('body').css({'overflow': 'hidden', 'height': '100%'})
        jq('html').css({'overflow': 'hidden', 'height': '100%'})
//        jq('.nav-body').css('position', 'relative')
//        jq('.nav-body').animate({right: '-370px'})
        jq('.ly-nav').animate({left: '-265px'}, 299)
        jq('.nav-tab').animate({left: '-254px'}, 299)
        jq('#app').animate({left: '-265px'}, 300)
      },
      menunone () {
        // jq('.ly-nav').animate({left: '0'})
        jq('#app').animate({left: '0'}, 300)
        jq('#app,.nav-tab, .ly-nav').animate({left: '0'}, function () {
          jq('.nav-tab').css('display', 'none')
          jq('body').css('overflow', 'auto')
        })
      },
      menunoneRouter (value) {
        var that = this
        jq('#app,.nav-tab, .ly-nav').animate({left: '0'}, 200, function () {
          jq('.nav-tab').css('display', 'none')
          jq('body').css('overflow', 'auto')
        })
        setTimeout(function () {
          if (value !== null && value !== '') {
            that.$router.push(value)
          }
        }, 300)
      },
      goRoute: function (val) {
        window.history.back()
      }
    }
  }
</script>
<style lang="scss">
  $bgcolor: #48cbf7;

  .ly-nav {
    border:0px solid red;
    width: 100%;
    /*width:-webkit-fill-available;*/
    box-sizing: border-box;
   /* margin: 0 -12px;*/
/*
    margin: 0px 0 0 -24px;
*/
   /* margin-left: -12px;
    padding: 0 24px;*/
    padding: 0 12px;
    display: flex;
    position:fixed;
    top: 0;
    border-bottom:1px solid #dedede;
    height: 44px;
    z-index:99;
    /*padding: 9px 0;*/
    flex-flow: row nowrap;
    justify-content: space-between;
    /*border:1px solid ;*/
    align-items: center;
    background-color: white;
    & + div {
      padding: 44px 0 0;
    }
    img {
      /*border: 1px solid */
    }
    img:nth-child(1) {
      width: 122px;
      height: 35px;
    }
    img:nth-child(2) {
      width: 20px;
      height: 20px;
    }
  }
  /* 右侧导航条*/
  .nav-tab {
    min-height: 100%;
    /*width:-webkit-fill-available;*/
    position:fixed;
    //border:1px solid red;
    //background-color:red;
    // position: absolute;
    width: inherit !important;
    /*width:100%;*/
    z-index: 99;
    top: 0;
    width: -webkit-fill-available;
    margin: 0 -24px;
    box-sizing: border-box;
    display: none;
    margin-top: -2px;
    .nav-body {
      min-height: 100%;
     // border:10px solid yellow;
      height: -webkit-fill-available;
      position: absolute;
      right: -277px;
      width: 266px;
      background-color: #48cbf7;
      max-width:266px;
      overflow:hidden;
      padding: 179px 0 0;
      display: flex;
      flex-flow: column nowrap;
      padding-top:200px;
      a {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font: {
          size: 15px;
        }
      ;
        color: #ffffff;
        &:hover {
          background-color: #325ca8;
        }
      }
    }
  }
</style>
